<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css"/>
</head>

    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)"/>
            <!-- <input type="button" name="bt" id="button2" value="确认2"/> -->
        </div>
        <div id="todogroup">
        </div>
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
        </div>
    </div>
</body>

<script lang="javascript">
    
    var intCnt=0;  

    function init(){
        document.getElementById("button2").onclick=handleClick;
    }
function keyup(e){
    console.log(e);

    if(e.keyCode==13){
        handleClick();
    }
}
    function handleClick(e){

        console.log('handleClick');
        console.log(e);   

        var temp=getvalue();
        var div=document.createElement('div');

        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
            + intCnt +"'><input type='checkbox' name='todocheck'><div class='item-value'>"
            + temp + "</div><button class='item-del' type='button' onclick='deleteByIndex("
            + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value="";
        intCnt++;

    }

    function getvalue(){
        var temp=document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }
    function deleteByIndex(index){
        document.getElementById("todo"+index).remove();
    }
    function enter(id){
        document.getElementById(id).style='background-color:#3e3e3e'
    }
    function leave(id){
        document.getElementById(id).style='background-color:red'
    }

    init();
</script>

    <style>
        body{
            display:flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .main{
            padding: 8px;
            border:1px solid #333333;
            border-radius: 8px;
        }
        .row{
            display:flex;
        }
        .item{
            display: flex;
            align-items: center;
            margin: 6px;
            padding:3px;
        }
        .item:hover{
            background-color: gray;
        }
        .item-value{
            flex-grow: 1;
            color:#000000;
        }
        item-del{
            color:aliceblue;
            background-color: red;
            border: 0px;
            opacity: 0;
        }
        .item:hover.item-del{
            opacity: 1;
        }
        .input{
            width: 250px;
            padding: 8px;
            outline: none;
            border: 2px solid #b1afaf;

        }
        .input:focus{
            box-shadow: 0px 0px 10px#3762d9;
            border: 2px solid #3762d9;
        }
        
    </style>
    </html>